<template id="switch-btn">
  <div style="display: inline-block;">
    <div v-bind:style="{width:width,height:height,'border-radius':height,'flex-direction':state===1||state===10?'row-reverse':'row'}" v-bind:class="{switch:true,'switch-open':state===1||state===10,'switch-close':state===2||state===20,'switch-disable':state>3}" v-on:click="switchState">
      <span v-bind:style="{width:parseFloat(height)-0.4+'rem',height:parseFloat(height)-0.4+'rem','border-radius':height,transform: state===1||state===10?'translateX(-0.2rem)':'translateX(0.2rem)'}" class="switch-btn"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "switch_tool",
  data(){
    return {
      state:2,
      btnPosition:'translateX(.2rem)'
    }
  },
  props:['width','height','enabled'],
  mounted(){
    //1 - 开启 2 - 关闭
    //10 - 开启禁用  20 - 关闭禁用
    if(!this.enabled){
      this.switchState(2,true)
    }else{
      this.switchState(parseInt(this.enabled),true)
    }
  },
  methods:{
    switchState(s, disableEvent){
      if (s!==undefined && typeof(s) !== 'object'){
        this.state = s
      }else{
        if(this.state<3){
          this.state = this.state  === 1?2:1
        }
      }
      if (!disableEvent) {
        this.$emit("on-switch",this.state)
      }
    },
    getState() {
      return this.state
    }
  }
}
</script>

<style lang="css" scoped>
.switch{
  width:4rem;
  height:2rem;
  border-radius: 2rem;
  display:flex;
  flex-wrap: nowrap;
  align-items: center;
}
.switch .switch-btn{
  display: inline-block;
  width:1.6rem;
  height:1.6rem;
  border-radius: 2rem;
  background-color:#FFF;
}
.switch-open{
  background-color: #58b058;
  background-image: -moz-linear-gradient(top, #51a351, #62c462);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#51a351), to(#62c462));
  background-image: -webkit-linear-gradient(top, #51a351, #62c462);
  background-image: -o-linear-gradient(top, #51a351, #62c462);
  background-image: linear-gradient(to bottom, #51a351, #62c462);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff51a351', endColorstr='#ff62c462', GradientType=0);
  border-color: #62c462 #62c462 #3b9e3b;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.switch-close{
  background-color: #d14641;
  background-image: -moz-linear-gradient(top, #bd362f, #ee5f5b);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bd362f), to(#ee5f5b));
  background-image: -webkit-linear-gradient(top, #bd362f, #ee5f5b);
  background-image: -o-linear-gradient(top, #bd362f, #ee5f5b);
  background-image: linear-gradient(to bottom, #bd362f, #ee5f5b);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbd362f', endColorstr='#ffee5f5b', GradientType=0);
  border-color: #ee5f5b #ee5f5b #e51d18;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.switch-disable{
  opacity: .5;
}
</style>